<template>
  <div class="profile-model">
    <div class="profile-model-title">
      <slot name="title-icon">
        <el-icon><Box /></el-icon>
      </slot>
      <span class="title-text">模型</span>
    </div>

    <div class="profile-model-content">
      <template v-for="cardItem in isOthers ? othersModelList : modelList" :key="cardItem.id">
        <div class="profile-model-card hover-boxshadow">
          <div class="profile-model-card-left">
            <img v-if="cardItem.image_url" :src="cardItem.image_url" />
            <img v-else src="@/assets/img/default/default_article.png" />
          </div>

          <div class="profile-model-card-right">
            <div class="profile-model-card-title t-of-1">{{ cardItem.title }}</div>

            <div class="profile-model-card-content t-of-2">{{ cardItem.desc }}</div>

            <div class="profile-model-card-trending">Trending</div>
          </div>
        </div>
      </template>
    </div>

    <template v-if="isOthers ? othersModelList.length <= 0 : modelList.length <= 0">
      <div class="none-tip">空空如也 ~</div>
    </template>
  </div>
</template>

<script lang="ts" setup>
import useProfileStore from '@/stores/profile/profile'
import { storeToRefs } from 'pinia'
import useRouterJump from '@/hooks/useRouterJump'
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const profileStore = useProfileStore()
const { modelList, isProfileChange, othersModelList } = storeToRefs(profileStore)

const isOthers = ref(false)

// ====== watch
watch(isProfileChange, () => {
  setupInit()
})

// item click
const handleItemClick = (payload: any) => {
  useRouterJump('/article-detail', { articleId: payload.id })
}

// lifecycle
function setupInit() {
  if (route.query.userId) {
    isOthers.value = true
  } else {
    isOthers.value = false
    profileStore.selectFileAction()
  }
}
setupInit()
</script>

<style lang="less" scoped>
.profile-model {
  .profile-model-title {
    display: flex;
    align-items: center;
    font-size: 21px;
    font-weight: bold;
    color: #0075ff;

    .title-text {
      margin-left: 9px;
    }
  }

  .profile-model-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 25px;
    column-gap: 19px;
    margin-top: 40px;

    .profile-model-card {
      display: flex;
      width: 348px;
      height: 135px;
      background: #ffffff;
      border-radius: 5px;
      opacity: 1;
      border: 1px solid rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      padding: 15px;
      cursor: pointer;

      .profile-model-card-left {
        flex: none;
        height: 105px;
        width: 105px;
      }

      .profile-model-card-right {
        box-sizing: border-box;
        width: 215px;
        padding-left: 13px;

        .profile-model-card-title {
          font-size: 17px;
        }

        .profile-model-card-content {
          font-size: 14px;
          font-weight: 400;
          color: #666666;
          margin-top: 10px;
          line-height: 16px;
        }

        .profile-model-card-trending {
          width: fit-content;
          background: rgba(217, 217, 217, 0.5);
          border-radius: 2px;
          font-size: 12px;
          font-weight: 500;
          padding: 4px 8px;
          margin-top: 20px;
        }
      }
    }
  }
}
</style>
